<template>
    <div class="wrapper">
        <header>
            <el-button @click="out">退出</el-button>
        </header>
        <section>
            <aside>
                <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    unique-opened
                    router   
                    background-color="#545c64"
                    text-color="#fff"
                    active-text-color="#ffd04b">
                    <el-submenu :index="item.id+''" v-for="item in menus" :key="item.id" > 
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>{{item.authName}}</span>
                        </template>
                        <el-menu-item-group>
                        <el-menu-item v-for="child in item.children" :key = "child.id" :index="child.id+''" :route="child.path">{{child.authName}}</el-menu-item>
                        <!-- <el-menu-item index="1-2">选项2</el-menu-item> -->
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </aside>
            <main>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>{{parentName}}</el-breadcrumb-item>
                    <el-breadcrumb-item>{{childName}}</el-breadcrumb-item>
                </el-breadcrumb>
                <el-card class="content">
                    <router-view />
                </el-card>
            </main>
        </section>
    </div>
</template>
<script>
import {mapMutations,mapState } from 'vuex'
export default {
    name:'HomeLayout',
    data() {
        return {
            /**
             * 父菜单名称
             */
            parentName:'',
            /**
             * 子菜单名称
             */
            childName:''
        }
    },
    updated() {
        this.foundName();
    },
    computed:{
        ...mapState(['menus']),
    },
    mounted() {
        this.foundName();
    },
    methods: {
        async out(){
            try{
                await this.$mb.confirm('您确定要退出吗？');
                this.$store.dispatch('exit')
            }catch(error){}
        },
        /**
         * 查找面包屑名称
         */
        foundName(){
            const path = this.$route.path.replace('/',""); //当前路径
            for (const parent of this.menus) {
                for (const child of parent.children) {
                    if(child.path === path){
                        this.parentName = parent.authName;
                        this.childName = child.authName;
                        return; 
                    }else{
                    }
                }
            }
        }
    },
}
</script>
<style lang="less">
    .wrapper{
        height:  100%;
        display: flex;
        flex-direction: column;
    }
    header{
        height: 60px;
        background: #373d41;
        flex-shrink: 0;
        &>.el-button{
            float: right;
            margin-top: 10px;
            margin-right: 20px;
        }
    }
    section{
        flex: 1;
        display: flex;
        // flex-direction: row;
        aside{
            width: 200px;
            background: #333744;
        }
        main{
            flex: 1;
            height: 100%;
            overflow: hidden;
            box-sizing: border-box;
            padding: 20px;
            background: #eaedf1;
            display: flex;
            flex-direction: column;
            .content{
                flex:1;
                overflow: auto;
                max-height: 100%;
            }
            .el-breadcrumb{
                margin-bottom: 20px;
            }
        }
    }
</style>